<template>
  <div ref="dswd-joinus-three">
    <div
      v-if="device === 'desktop'"
      class="dswd-joinus-three"
    >
      <div class="three-wrap">
        <div class="joinus-three-title">
          <div class="joinus-title">员工心声</div>
          <div class="joinus-en-title">Why Choose Us</div>
        </div>
        <div class="three-content">
          <div ref="news-carousel" class="news-carousel">
            <carousel
              v-if="showCarousel"
              :height.sync="carouselHeight"
              :latest-news.sync="latestNews"
            />
          </div>
        </div>
      </div>
      <div class="dividing-line" />
    </div>
    <div v-if="device === 'ipad'" class="dswd-p-joinus-three">
      <div class="three-wrap">
        <div class="joinus-three-title">
          <div class="joinus-title">员工心声</div>
          <div class="joinus-en-title">Why Choose Us</div>
        </div>
        <div class="three-content">
          <div ref="news-carousel" class="news-carousel">
            <carousel
              v-if="showCarousel"
              :height.sync="carouselHeight"
              :latest-news.sync="latestNews"
            />
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device === 'mobile'" class="dswd-m-joinus-three">
      <div class="three-wrap">
        <div class="joinus-three-title">
          <div class="joinus-title">员工心声</div>
          <div class="joinus-en-title">Why Choose Us</div>
        </div>
        <div class="three-content">
          <div ref="news-carousel" class="news-carousel">
            <carousel
              v-if="showCarousel"
              :height.sync="carouselHeight"
              :latest-news.sync="latestNews"
            />
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import drawImg from '@/components/Drawimg'
import carousel from './carousel'
import { mapState } from 'vuex'
export default {
  components: { carousel },
  data() {
    return {
      latestNews: [
        {
          id: 1,
          author: '李工',
          title: '第三维度对新想法的尊重和支持，让我坚信，TransBIM（大智绘）的未来，由我们创造。',
          duty: '项目经理',
          authorIcon: require('../../assets/image/joinus/three/lifei.jpg'),
          url: require('../../assets/image/joinus/three/yuangong.png'),
          updateTime: '2021-05-24T01:46:11.000+00:00'
        }
      ],
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        list: []
      },
      carouselHeight: '500px',
      showCarousel: false
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
      clientWidth: (state) => state.app.clientWidth
    })
  },
  watch: {
    clientWidth() {
      this.resizeHandler()
    }
  },
  mounted() {
    this.resizeHandler()
  },
  methods: {
    resizeHandler() {
      this.$nextTick(() => {
        if (
          this.$refs['news-carousel'] &&
          this.$refs['news-carousel'].clientWidth
        ) {
          const first_width = this.$refs['news-carousel'].clientWidth
          this.carouselHeight = first_width * 0.57 + 'px'
          this.showCarousel = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/joinus/three.scss";
</style>
